<template>
  <el-button-group>
    <el-button type="primary" @click="outerVisible=true">
      钱包<el-icon class="el-icon--right"><ArrowRight /></el-icon>
    </el-button><br>
    <el-button type="primary">
      行程<el-icon class="el-icon--right"><ArrowRight /></el-icon>
    </el-button><br>
    <el-button type="primary">
      客服<el-icon class="el-icon--right"><ArrowRight /></el-icon>
    </el-button><br>
    <el-button type="primary">
      消息<el-icon class="el-icon--right"><ArrowRight /></el-icon>
    </el-button><br>
    <el-button type="primary">
      设置<el-icon class="el-icon--right"><ArrowRight /></el-icon>
    </el-button><br>
    <el-button type="primary" @click="invited=true">
      邀请有奖<el-icon class="el-icon--right"><ArrowRight /></el-icon>
    </el-button><br>
    <el-button type="primary" @click="coupontemplateList=true">
      抢券<el-icon class="el-icon--right"><ArrowRight /></el-icon>
    </el-button><br>
  </el-button-group>

  <el-dialog v-model="outerVisible" title="我的钱包" width="800">
    <el-button type="primary">余额明细</el-button><br>
    <span>当前余额:
    </span>
    {{loginUser.userBalance}}<el-button type="primary">去充值</el-button><br>
    <hr>
    <el-button type="primary" @click="myCoupon(0)">
      代金券<el-icon class="el-icon--right"><ArrowRight /></el-icon>
    </el-button><br>
    <hr>
    <el-button type="primary" @click="outerVisible=true">
      发票报销<el-icon class="el-icon--right"><ArrowRight /></el-icon>
    </el-button><br>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="outerVisible = false">Cancel</el-button>
        <el-button type="primary" @click="innerVisible = true">
          Open the inner Dialog
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="coupontemplateList" title="抢单页面" width="800" style="float: left">
    <el-button v-for="i in sessionList" @click="grabsession(i.sessionId)">{{ i.sessionName }}</el-button>

    <el-table
        :data="couponsessionList"
        style="width: 100%">
      <el-table-column
          label="日期"
          width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.couponDescription }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
  <el-dialog v-model="coupon" title="代金券" width="800" style="float: left">
    <el-button type="primary" @click="myCoupon(1)">用券历史</el-button><br>
    <span v-for="i in couponList">
      <el-card style="max-width: 480px">
        <template #footer>
          <span style="font-size: 50px;color:red;float: left">￥{{i.couponAmount}}</span><br>
          <span style="float: left;margin-left: 30px">有效期至{{i.endTime}}</span>
          <span v-html="i.couponTitle" style="float: left;margin-left: 30px"></span>
        </template>
  </el-card>
      <div style="clear: both"></div>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="coupon = false">Cancel</el-button>
        <el-button type="primary" @click="innerVisible = true">
          Open the inner Dialog
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="invited" title="分享邀请码" width="800" style="float: left">
      {{invitedto.url}}
    <el-form-item label="邮箱">
      <el-input v-model="invitedto.email" />
    </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="coupon = false">关闭</el-button>
        <el-button type="primary" @click="inviteFriend()">
          邀请好友
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="Coupon">
import {
  listCoupon,
  getCoupon,
  delCoupon,
  addCoupon,
  updateCoupon,
    getUrl,
  invite
} from "@/api/coupon/coupon";
import { getInfo } from '@/api/login.js'
import { ref } from 'vue'
import {
  ArrowRight
} from '@element-plus/icons-vue'
import {listCouponTemplate} from "../../../api/background/CouponTemplate.js";
import {couponSnatching, findSession} from "../../../api/coupon/coupon.js";


const invitedto=ref(
    {
      url: "",
      email: ""
    }
)
const coupontemplateList = ref(false)
const outerVisible = ref(false)
const invited = ref(false)
const innerVisible = ref(false)
const {proxy} = getCurrentInstance();
const coupon = ref(false)
const couponList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const couponTemplateList = ref({});
const sessionList = ref([]);
const couponsessionList = ref([]);

const loginUser = ref({})
const datas = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    couponAmount: null,
    couponDescription: null,
    startTime: null,
    endTime: null,
    isDelete: null,
  },
  rules: {
  }
});

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    couponId: null,
    userId: null,
    couponTitle: null,
    couponAmount: null,
    couponStatus: null,
    startTime: null,
    endTime: null,
    isDelete: null,
  },
  rules: {
    couponId: [
      {
        required: true, message: "代金卷id不能为空", trigger: "blur" }
    ],
  }
});

const {queryParams, form, rules} = toRefs(data);


/**
 * 分享邀请码
 */
function inviteFriend() {
    invite(invitedto.value).then(
        res => {
          alert(res.msg)
        }
    )
}
function handleButtonClick(session) {
  console.log(session)
  Qiang(session).then(
      res => {
        alert(res.data)
      }
  )
}
function grabsession(sessionid){
  couponSnatching(sessionid).then(
      res => {
        couponsessionList.value = res.data
      }
  )
}
/**
 * 获取场次信息
 */
function getSession(){
  findSession().then(
      res =>{
        sessionList.value = res.data

      }
  )
}

/**
 * 获取优惠卷表的列表
 */
function getcouponList() {
  listCouponTemplate(datas.value).then(
      res => {
        couponTemplateList.value = res.data.rows
      }
  )
}
/**
 * 获取当前用户信息
 */
function getuserinfo(){
  getInfo().then( res =>{
    loginUser.value = res.data.user;
  })
}
function geturl() {
  getUrl().then(res => {
    console.log(res)
    invitedto.value.url = res.data
    console.log(invitedto)
  })
}
function myCoupon(status) {
  queryParams.value.couponStatus=status
  listCoupon(queryParams.value).then(res => {
    couponList.value = res.data.rows;
    total.value = res.data.total;
  })
  coupon.value=true
}
getuserinfo()
geturl()
// getcouponList()
getSession()
</script>

